<template>
    <div id="mine">
        <!-- <van-skeleton title avatar row="3" loading="false" /> -->
        <div class="head">
         <div class="head-img">
            <van-image
                width="50"
                height="50"
                :src="userImage"
                round="true"
            />
            <ul class="head-text">
                <li>昵称：{{name}}</li>
                <li>账号：{{phone}}</li>
            </ul>
        </div>
            
        </div>
        <div class="body-text">
            <div class="body-b1">
                <van-cell
                is-link
                title="修改密码"
                link-type="navigateTo"
                @click="updatePassWord"
                icon="lock"
                />
            </div>
            <div class="body-b2">
                 <van-cell
                is-link
                title="我的宠物"
                link-type="navigateTo"
                @click="myPet"
                icon="like"
                />
                <van-cell
                is-link
                title="意见反馈"
                link-type="navigateTo"
                @click="openOpinionPanel"
                icon="star"
                />
                 <van-cell
                is-link
                title="我的萌宠小日志"
                link-type="navigateTo"
                @click="myPetLogs"
                icon="comment"
                />
                 <van-cell
                is-link
                title="宠物生活小闹钟"
                link-type="navigateTo"
                @click="petLoclk"
                icon="clock"
                />

            </div>
            <!--退出登录-->
            <div class="body-b3">
                <van-button type="primary" size="large" round="true" 
                hairline="true" @click="exit()" color="#4a9849">退出登录</van-button>
            </div>
        </div>


         <van-dialog
            use-slot
            title="修改密码"
            v-model="isShowUpdatPwd"
            show-cancel-button
            confirm-button-open-type="getUserInfo"
            bind:close="onClose"
            bind:getuserinfo="getUserInfo"
            >
            <div class="uppwd">
             <van-cell-group>
                  <van-field
                    v-model ="oldPwd"
                    required
                    type="password"
                    label="旧密码"
                    icon="question-o"
                    placeholder="首次修改旧密码为123456"
                />
                <van-field
                    v-model ="newPwd"
                    required
                    type="password"
                    label="新密码"
                    icon="question-o"
                    placeholder="请输入新密码"
                />

                <van-field
                    v-model="newPwd2"
                    type="password"
                    label="新密码"
                    placeholder="请再次输入新密码"
                    required
                    border="false"
                />
                </van-cell-group>
            </div>
            </van-dialog>

            <!--意见反馈-->
            <van-dialog
            use-slot
            title="意见反馈"
            v-model="isShowOptionPanel"
            show-cancel-button
            confirm-button-open-type="getUserInfo"
            bind:close="onClose"
            bind:getuserinfo="getUserInfo"
            @confirm="confirmOpion"
            >
            <div>
                <van-cell-group>
                    <van-field
                    v-model ="email"
                    required
                    type="text"
                    label="邮箱"
                    icon="question-o"
                    placeholder="填写您的联系邮箱"
                />
                <textarea class="content" autocomplete="true" v-model="OptionContent"/>
                </van-cell-group>
            </div>
            </van-dialog>
    </div>
</template>
<script>
import {Dialog} from 'vant'
export default {
    data(){
        return{
            name:localStorage.getItem("userName"),
            id:localStorage.getItem("userId"),
            phone:localStorage.getItem("userPhone"),
            isShowUpdatPwd:false,
            newPwd:'',
            newPwd1:"",
            oldPwd:'',
            isShowOptionPanel:false,
            email:'',
            OptionContent:'',
            userImage:"https://pett.oss-cn-beijing.aliyuncs.com/"+localStorage.getItem("userImage")
        }
    },
    methods:{
        getUser(){
            this.$post('/pet_user/release/1','').then(res=>{
                this.name=res.name
                this.id=res.id
                this.phone=res.phone
            })
        },
        exit(){
            Dialog.confirm({
                message: '确认退出登录？'
                }).then(() => {
                    // on close
                    localStorage.removeItem("petToken")
                    //这个可以关闭安卓系统的手机
                    document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false);
                    //这个可以关闭ios系统的手机
                    WeixinJSBridge.call('closeWindow');
                }).catch(()=>{
                    
                });
        },
        myPetLogs(){
            this.$router.push({path:'/petLogs'})
        },
        myPet(){
            this.$router.push({name:'myPet'})
        },
        updatePassWord(){
            this.isShowUpdatPwd=!this.isShowUpdatPwd
        },
        petLoclk(){
            this.$router.push({name:'petLoclk'})
        },
        openOpinionPanel(){
            this.isShowOptionPanel=!this.isShowOptionPanel
        },
        confirmOpion(){
            this.$Toast.success("提交成功，谢谢您的建议")
        }
    },
    created(){
        this.getUser()
    }
}
</script>

<style scoped>
    .head{ 
        background-color:white;
        margin: .6rem .3rem;
        border-radius: .6rem;
        height: 100px;
    }
    .head-img{
        display: flex;
        padding-left: .4rem;
        padding-top: .4rem;
    }
    .head-text{
        margin: 0;
        padding: 0;
        list-style: none;
        padding-left: 1.8rem;
        padding-top: .8rem;
        line-height: 1.6rem;
        font-size: 14px;
    }
    .body-text{
        margin-top: .8rem;
    }
    .body-b1{
        margin: .6rem;
    }
    .body-b2{
        margin: .6rem;
        border-radius: .2rem;
    }
    .body-b3{
        margin:2rem 1rem
    
    }
    .uppwd{
        height: 150px;
        width: 100%;
        margin-top: 1rem;
        margin-left: 2rem;
    }
    .content{
        height: 150px;
        width: 100%;
    }
</style>